<template>
  <div class="brandSales">
    <c-title :hide="false" :text="$route.name == 'brandSales' ? '品牌销售榜' : '畅销品牌榜'"></c-title>
    <div class="brandSalesImg">
      <img :src="is_background" alt="" />
    </div>
    <div class="brandSalesBox">
      <!-- <div class="salesNav" v-if="$route.name == 'brandSales'">
        <div class="lis" :class="{ lis_s: sort_type == 1 }" @click="sortTap(1)">销售额</div>
        <div class="lis" :class="{ lis_s: sort_type == 2 }" @click="sortTap(2)">销售件数</div>
        <div class="lis" :class="{ lis_s: sort_type == 3 }" @click="sortTap(3)">收入</div>
      </div> -->
      <div class="list" v-for="(items, index) in dataList" :key="items">
        <div class="brand">
          <div class="pImg" v-if="items.link <= 3">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/cloud_shop%2Ftop1.png" v-if="items.rank == 1" alt="" />
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/cloud_shop%2Ftop2.png" v-else-if="items.rank == 2" alt="" />
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/cloud_shop%2Ftop3.png" v-else-if="items.rank == 3" alt="" />
            <div class="txt">{{ items.rank }}</div>
          </div>
          <div class="brand_top">
            <div class="brand_top_l">
              <div class="brandimg">
                <img :src="items.logo" alt="" />
              </div>
              <div class="brand_detail">
                <div class="brand_detail_name">{{ items.name }}</div>
                <div class="brand_detail_tag">共{{ items.goods_count }}款</div>
              </div>
            </div>
            <div class="brand_follow" :class="{ brand_follow_default: items.is_follow }" v-if="brand_follow_status && $route.name != 'brandSales'" @click="tapFollowM(items, index)">{{ items.is_follow ? "已订阅" : "订阅" }}</div>
          </div>
          <div class="brand_good_box">
            <div class="brand_good" v-for="item in items.has_many_goods" :key="item.id" @click="toGood(item)">
              <div class="brand_good_img">
                <img :src="item.thumb" alt="" />
              </div>
              <div class="brand_good_bottom">
                <div class="price">{{ $i18n.t("money") }}{{ item.price }}</div>
                <div class="price_txt" v-if="$route.name == 'brandSales'">销售额<span class="iscolor">{{ $i18n.t("money") }}{{ item.sale_amount }}</span> </div>
                <div class="price_txt" v-if="$route.name == 'brandSales'">销售件数<span class="iscolor">{{ item.sale_count }}</span> </div>
                <div class="price_txt" v-if="$route.name == 'brandSales'">收入<span class="iscolor">{{ $i18n.t("money") }}{{ item.reward_amount }}</span> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      sort_type: 1,
      is_background: "",
      page: 1,
      total_page: 0,
      isLoadMore: true,
      dataList: [],
      self_reward_name: "",
      brand_follow_status: 0
    };
  },
  activated() {
    let cloud_shop = JSON.parse(localStorage.getItem("yz_basic_info")).plugin_setting.cloud_shop;
    if (cloud_shop) {
      this.self_reward_name = cloud_shop.self_reward_name;
      this.brand_follow_status = cloud_shop.brand_follow_status;
    }
    this.sort_type = 1;
    this.getData();
  },
  methods: {
    toGood(item){
      this.$router.push(this.fun.getUrl('goods', {id:item.id}));
    },
    async tapFollowM(item, index) {
      let json = {
        brand_id: item.id,
        status: item.is_follow ? 0 : 1
      };
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.brand.follow", json, "");
      if (result) {
        this.dataList[index].is_follow = item.is_follow ? 0 : 1;
        this.$set(this.dataList[index], is_follow, this.dataList[index].is_follow)
        this.$toast(msg);
      } else {
        this.$toast(msg);
      }
    },
    init() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.dataList = [];
    },
    sortTap(ind) {
      this.sort_type = ind;
      this.getData();
    },
    async getData() {
      let urlStr = "plugin.cloud-shop.frontend.self-sales.index";
      let json = {};
      if (this.$route.name == "brandSales_new") {
        urlStr = "plugin.cloud-shop.frontend.many-sales.index";
      } else {
        json = { sort_type: this.sort_type };
      }
      let { data, msg, result } = await $http.post(urlStr, json, "");
      if (result) {
        this.is_background = data.background;
        this.dataList = data.list.data;
        this.total_page = data.list.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {};
        let urlStr = "plugin.cloud-shop.frontend.self-sales.index";
        if (this.$route.name == "brandSales_new") {
          urlStr = "plugin.cloud-shop.frontend.many-sales.index";
          json = { page: this.page };
        } else {
          json = { sort_type: this.sort_type, page: this.page };
        }
        let { data, msg, result } = await $http.post(urlStr, json, "");
        this.isLoadMore = true;
        if (result) {
          this.dataList = this.dataList.concat(data.list.data);
        } else {
          this.page = this.page - 1;
          this.$toast(msg);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.pImg {
  position: absolute;
  right: 0.63rem;
  top: 0;
  .txt {
    position: absolute;
    font-weight: bold;
    font-size: 0.88rem;
    color: #935211;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    margin-top: 0.7rem;
  }
  img {
    width: 2rem;
    height: 2rem;
  }
}
.brandSales {
  .brandSalesImg {
    width: 100%;
    background: #ffe9e9;
    img {
      width: 100%;
      height: auto;
    }
  }
  .brandSalesBox {
    padding: 0 0.75rem;
    box-sizing: border-box;
    .salesNav {
      margin: 0.81rem 0;
      display: flex;
      .lis {
        font-size: 0.81rem;
        color: #3b3b4a;
        margin-right: 1rem;
      }
      .lis_s {
        color: #f15353;
      }
    }
    .list {
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 0.5rem;
      margin-bottom: 0.63rem;
      .brand {
        padding: 0.63rem;
        display: flex;
        flex-direction: column;
        position: relative;
        .brand_top {
          display: flex;
          margin-bottom: 0.63rem;
          align-items: center;
          .brand_top_l {
            flex: 1;
            display: flex;
          }
          .brand_follow {
            padding: 0.31rem 0.56rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            background: #f15353;
            border-radius: 0.94rem;
            font-size: 0.81rem;
            color: #ffffff;
          }
          .brand_follow_default {
            color: #f15353;
            border: 1px solid #f15353;
            background: #ffffff;
          }
          .brandimg {
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
            border: 0.03rem solid #e9e9e9;
            img {
              width: 100%;
              height: 100%;
              border-radius: 0.5rem;
            }
          }
          .brand_detail {
            display: flex;
            flex-direction: column;
            margin-left: 0.41rem;
            align-items: flex-start;
            justify-content: space-between;
            .brand_detail_name {
              font-weight: bold;
              font-size: 1rem;
            }
            .brand_detail_tag {
              font-size: 0.63rem;
              color: #f15353;
              padding: 0.1rem 0.25rem;
              box-sizing: border-box;
              border-radius: 0.13rem;
              border: 0.03rem solid #f15353;
            }
          }
        }
        .brand_good_box {
          display: flex;
          overflow-x: scroll;
        }
        .brand_good {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          width: 6.56rem;
          margin-right: 0.5rem;
          .brand_good_img {
            height: 6.56rem;
            background: #f0f0f1;
            border-radius: 0.5rem;
            img {
              width: 100%;
              height: 100%;
              border-radius: 0.5rem;
            }
          }
          .brand_good_bottom {
            text-align: left;
            padding: 0.53rem 0.13rem;
            box-sizing: border-box;
            .price {
              font-weight: 500;
              font-size: 0.88rem;
              color: #f15353;
              word-break: break-all;
            }
            .price_txt {
              margin-top: 0.2rem;
              font-weight: 500;
              font-size: 0.81rem;
              color: #808080;
              .iscolor {
                color: #f15353;
                word-break: break-all;
              }
            }
          }
        }
        .brand_good:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
